import { memo } from 'react'
import { AppModalContainer } from './styled'
import ReactDOM from 'react-dom'
import { CSSTransition } from 'react-transition-group'
import styled from 'styled-components'
import { VscChromeClose } from 'react-icons/vsc'
const ModalCSSTransition = styled(CSSTransition)`
	transition: all 300ms ease;
	&.appear,
	&.enter {
		opacity: 0;
	}

	&.appear-active,
	&.appear-done {
		opacity: 1;
	}

	&.enter-done,
	&.enter-active {
		opacity: 1;
	}
	&.exit-done,
	&.exit-active {
		opacity: 0;
	}
`

export default memo(({ title = 'modal title', footer = '', show, children, onClose }) => {
	return ReactDOM.createPortal(
		<ModalCSSTransition appear={true} in={show} timeout={300}>
			{show ? (
				<AppModalContainer>
					<div className="modal-wrapper">
						<VscChromeClose className="close-icon" onClick={() => onClose()} />
						<div className="title">
							{title}
						</div>
						<div className="content">{children}</div>
						{footer && <div className="footer">{footer}</div>}
					</div>
				</AppModalContainer>
			) : <></>}
		</ModalCSSTransition>,
		document.body
	)
})
